<template>
	<view class="pagesBox">
		<view class="pagesMain">
			<view class="inputBox">
				<view class="popupInput">
					<view class="inputTitle">申请类型</view>
					<view class="tagBox">
						<block v-for="(item,index) in applyList" :key="index">
							<view :class="['tagItem',index == applyIndex ? 'active':'']" @click="toSelect(index)">{{item}}</view>
						</block>
						<view style="width: 32.5%;" v-if="applyList.length % 3 == 2"></view>
					</view>
				</view>
				<view class="popupInput">
					<view class="inputTitle">联系手机号</view>
					<u-input v-model="params.refund_phone" placeholder="请输入手机号" :clearable="false" :custom-style="inputStyle" type="number" :border='true' :height="96" maxlength="11"></u-input>
				</view>
				<view class="popupInput">
					<view class="inputTitle"><text v-if="applyIndex == 4">需要平台介入的</text>原因</view>
					<u-input v-model="params.refund_explain" placeholder="请输入原因" :clearable="false" :custom-style="inputAreaStyle" type="textarea" :border='true' :height="96" maxlength="200" @input="inputChange"></u-input>
					<view class="textNum">{{wordNum}}/200</view>
				</view>
			</view>
			<view class="uploadImageBox">
				<view class="uploadImageTitle">证明材料</view>
				<view class="uploadImageTip">最多可上传3张图</view>
				<view class="uploadBody">
					<block v-for="(item,index) in imageCarList" :key="index">
						<view class="myUploadImage"  v-if="imageCarList.length">
							<image :src="item.absolutely" style="width: 200rpx;height: 200rpx;"></image>
							<view class="del" @click="delImage(1,index)"><image  :src="`${baseUrl}/static/my/uploaddel.png`" mode="widthFix" style="width: 48rpx;height: 48rpx;"></image></view>
						</view>
					</block>
					<view class="uploadImageIcon" v-if="imageCarList.length < 3" @click="shangchuan()">
						<image :src="`${baseUrl}/static/my/uploadIcon.png`" mode="widthFix" style="width: 60rpx;height: 60rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		<my-submitBtn btnText="提交售后" @click="submitBefore"></my-submitBtn>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				inputStyle:{color:'#000',borderRadius:'6rpx',fontSize: '32rpx'},
				inputAreaStyle:{color:'#000',borderRadius:'6rpx',fontSize: '32rpx',minHeight:'300rpx'},
				params:{
					id:'',
					refund_type:1,
					refund_phone:'',
					refund_explain:'',
					refund_images:'',
				},
				wordNum:0,
				imageCarList:[],
				// 申请类型
				applyIndex:0,
				applyList:['退货退款','换货','货物破损'],
				// 订单状态
				status:''
			};
		},
		onLoad(options) {
			this.params.id = options.id;
			this.status = options.status;
		},
		methods:{
			submitBefore(){
				if(!this.$u.test.mobile(this.params.refund_phone)){
					uni.$u.toast('请输入正确的手机号')
				}else if(!this.params.refund_explain){
					uni.$u.toast('请输入原因')
				}else if(this.imageCarList.length == 0){
					uni.$u.toast('请上传证明材料')
				}else{
					if(this.time){
						clearTimeout(this.time)
						this.time = '';
					}
					if(this.imageCarList.length > 0){
						this.params.refund_images = this.imageCarList.map(item=>{return item.relative}).join(',')
					}
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.time = setTimeout(()=>{
						this.submit()
					},500)
				}
			},
			async submit(){
				let res = await uni.$http('POST','order/afterSales',this.params)
				console.log('提交售后',res);
				uni.hideLoading()
				uni.$u.toast(res.msg)
				if(res.code == 1){
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			},
			// 选择售后类型
			toSelect(index){
				this.applyIndex = index;
				this.params.refund_type = index + 2;
			},
			// 上传图片
			shangchuan(){
				let count = 3 - this.imageCarList.length;
				uni.chooseImage({
					count:count,
					success: (resImage) => {
						console.log('选择图片',resImage);
						const tempFilePaths = resImage.tempFilePaths;
						for (var i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: this.$baseUrl+'/api/common/upload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file',
								header:{token:uni.getStorageSync('token')},
								success: (uploadFileRes) => {
									let result = JSON.parse(uploadFileRes.data)
									this.imageCarList.push(result.data);
								}
							});
						}
					}
				})
			},
			// 删除图片,type=1是删除照片，2是删除视频
			delImage(type,index){
				this.imageCarList = this.imageCarList.filter((item,indexArr)=>{return indexArr != index})
			},
			// 字数变化
			inputChange(){
				console.log(this.params.refund_explain);
				if(this.params.refund_explain){
					if(this.params.refund_explain.length <= 200){
						this.wordNum = this.params.refund_explain.length;
					}else{
						this.wordNum = 200;
					}
				}else{
					this.wordNum = 0;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	.pagesMain{
		.uploadImageBox{
			font-size: 28rpx;
			padding: 12rpx 24rpx;
			.uploadImageTip{
				font-weight: 400;
				font-size: 24rpx;
				color: #000;
			}
			.uploadImageTitle{
				color: #000;
				font-size: 32rpx;
				font-weight: 600;
				margin-bottom: 8rpx;
			}
			.uploadBody{
				margin-top: 16rpx;
				display: flex;
				flex-wrap: wrap;
				.uploadImageIcon{
					width: 200rpx;
					height: 200rpx;
					background-color: #f7f8fa;
					border-radius: 12rpx;
					margin-right: 8rpx;
					margin-bottom: 8rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.myUploadImage{
					width: 200rpx;
					height: 200rpx;
					border-radius: 8rpx;
					margin-right: 8rpx;
					margin-bottom: 8rpx;
					overflow: hidden;
					position: relative;
					.del{
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						z-index: 999;
					}
					.mengCeng{
						position: absolute;
						top: 0rpx;
						right: 0rpx;
						bottom: 0%;
						left: 0%;
						z-index: 888;
					}
				}
			}
		}
		.inputBox{
			// background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			padding-bottom: 0;
			.top{
				font-size: 38rpx;
				font-weight: 600;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.imageBox{
				font-size: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.popupInput{
				margin-bottom: 32rpx;
				position: relative;
				.inputTitle{
					font-weight: 600;
					font-size: 28rpx;
					color: #000;
					margin-bottom: 10rpx;
				}
				.kuang{
					height: 96rpx;
					line-height: 96rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #303133;
					background-color: #F7F8FA;
					// border: 2rpx solid #dcdfe6;
					border-radius: 6rpx;
					padding-left: 24rpx;
				}
				.slot-btn{
					width: calc(100vw - 124rpx);
					height: 240rpx;
					border: #eee solid 2rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					.uploadCount{
						color: #A1A5AA;
						font-size: 24rpx;
						margin-top: 6rpx;
					}
				}
				// 选择类型
				.tagBox{
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;
					.tagItem{
						width: 32.5%;
						height: 80rpx;
						line-height: 80rpx;
						text-align: center;
						font-weight: 400;
						font-size: 30rpx;
						color: #fff;
						background: #ccc;
						border-radius: 16rpx;
						// border: 2rpx solid #0F3255;
						margin-bottom: 16rpx;
					}
					.active{
						font-weight: 600;
						font-size: 30rpx;
						color: #fff;
						background: #2BA777;
					}
				}
				// 字数
				.textNum{
					color: #A1A5AA;
					position: absolute;
					bottom: 12rpx;
					right: 16rpx;
				}
			}
		}
	}
}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>